.margin{width: 1200px; margin: 0 auto;}
body{background: #f6f6f6;}
header{height: 38px; background: #f6f6f6;}
header .left{float: left; text-align:center;}
header .left li{float: left; font:12px/38px ""; color: #000; padding: 0 10px;}
header .left .welcome{display: none;}
header .left .welcome #logout{ color: red;}
header .left li:nth-child(1) a{color: red;}
header .right{ float: right; text-align: center;}
header .right li{float: left; font:12px/38px ""; color: #000; background: url(../images/h1.png) no-repeat right center; padding: 0 10px;}
header .right li:nth-child(2) a{color: red;}
header .right li.active{background-image: none;}


nav{background: #fff; }
nav  .logo{height: 70px; width: 210px; margin: 0 0 0 2px; background: url(http://jp.juancdn.com/juanpi/images/total/header-total.gif?20160112) no-repeat; background-position: -75px -32px;}
#active{background:#fff; height: 10px;}
#te{background:#ff464e; height: 3px;}

main{}
main table thead tr th{font: 12px/48px ""; color: #999;}
main table thead tr th:nth-child(1){ width: 50px;}
 main table tbody{ height: 150px; }
 main table tbody tr{ width: 1160px; height: 126px; background: #fff;  margin:20px;}

main .bottom ul{display: flex; background: #fff;padding: 0 25px;}
main .bottom ul li{ background:#f6f6f6 ; height: 128px; margin: 20px 0; text-align: center;}
main .bottom ul li input{margin-top: 60px;}
main .bottom ul:hover{ background: rgba(200,200,200,.2)}
main .bottom ul li:nth-child(1){width: 327.2px; display: flex; font: 12px/128px ""; color: #000; padding-left: 15px;}
main .bottom ul li:nth-child(1) img{ width: 100px; height: 100px; margin: 15px;}
main .bottom ul li:nth-child(2){width: 358.4px; text-align: center; font:14px/128px "";padding-left: 15px;}
main .bottom ul li:nth-child(2) span{font:14px/128px "";}
main .bottom ul li:nth-child(2) em{font:12px/128px ""; color: #999; }

main .bottom ul li:nth-child(3){width: 171.2px;}
main .bottom ul li:nth-child(3) .input{ width: 45px; height: 20px; margin-top: 50px; text-align: center; border: 1px solid #ccc; background: #f8f8f8;}

main .bottom ul li:nth-child(4){width: 171.2px; font: 14px/128px ""; color: #ff464e;}
main .bottom ul li:nth-child(4){}
main .bottom ul li:nth-child(5){width: 172px; display: flex; justify-content: center; align-items: center;}
main .bottom ul li:nth-child(5) img{}
main .bottom p{ font: 24px/2 "";}

.fl{
    float: left;
}
.fr {
    float: right;
}
.foot {
    margin: 0 auto;
    width: 1200px;
    margin-top: 10px;
    color: #666;
    height: 48px;
    border: 1px solid #c8c8c8;
    background-color: #eaeaea;
    background-image:linear-gradient(RGB(241,241,241),RGB(226,226,226));
    position: relative;
    z-index: 8;
}
.foot div, .foot a {
    line-height: 48px;
    height: 48px;
}
.foot .select-all {
    width: 100px;
    height: 48px;
    line-height: 48px;
    padding-left: 5px;
    color: #666;
}
.foot .closing {
    border-left: 1px solid #c8c8c8;
    width: 100px;
    text-align: center;
    color: #000;
    font-weight: bold;
    background: RGB(238,238,238);
    cursor: pointer;
}
.foot .total{
    margin: 0 20px;
    cursor: pointer;
}
.foot  #priceTotal, .foot #selectedTotal {
    color: red;
    font-family: "Microsoft Yahei";
    font-weight: bold;
}
.foot .selected {
    cursor: pointer;
}
.foot .selected .arrow {
    position: relative;
    top:-3px;
    margin-left: 3px;
}
.foot .selected .down {
    position: relative;
    top:3px;
    display: none;
}
 .show .selected .down {
    display: inline;
}
 .show .selected .up {
    display: none;
}
.foot .selected:hover .arrow {
    color: red;
}
.foot .selected-view {
    width: 935px;
    border: 1px solid #c8c8c8;
    position: absolute;
    height: auto;
    background: #ffffff;
    z-index: 9;
    bottom: 48px;
    left: -1px;
    display:none;
}
.show .selected-view {
    display: block;
}
.foot .selected-view div{
    height: auto;
}
.foot .selected-view .arrow {
    font-size: 16px;
    line-height: 100%;
    color:#c8c8c8;
    position: absolute;
    right: 330px;
    bottom: -9px;
}
.foot .selected-view .arrow span {
    color: #ffffff;
    position: absolute;
    left: 0px;
    bottom: 1px;
}
#selectedViewList {
    padding: 20px;
    margin-bottom: -20px;
}
#selectedViewList div{
    display: inline-block;
    position: relative;
    width: 100px;
    height: 80px;
    border: 1px solid #ccc;
    margin: 10px;
}
#selectedViewList div span {
    display: none;
    color: #ffffff;
    font-size: 12px;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 60px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    background: RGBA(0,0,0,.5);
    cursor: pointer;
}
#selectedViewList div:hover span {
    display: block;
}